﻿@model SILAS.UI.ViewModels.SectorViewModel

@{
	ViewBag.Title = "Create";
	Layout = "~/Views/Shared/_layoutGeneral.cshtml";
}

	<link href="@Url.Content("~/Content/themes/start/jquery-ui-1.9.1.custom.min.css")" rel="stylesheet" type="text/css" />
	
	<link rel="stylesheet" href="/resources/demos/style.css" />

	<script type="text/javascript">
		// increase the default animation speed to exaggerate the effect
		$.fx.speeds._default = 1000;
		$(function () {
			$("#popup").dialog({
				autoOpen: false,
				title: "Nueva Ruta",
				show: "drop",
				hide: "explode",
				width: 500,
				height:400,
				modal: true
			});

			$("#btnNuevo").button().click(function () {
				$("#popup").load('/Ruta/_Create');
				$("#popup").dialog("open");
				return false;
			});
		});
	</script>


	<!-- ################################################################# -->
	<script type="text/javascript">

		$(function () {


			$("#IdDistrito").change(function () {
				//alert('Cambiaste el combo = ' + $("#IdDistrito").val());
				LoadCentroPoblado($(this).val());
				//$("#lat").val();
				//$("#lng").val();
				LoadCaserio($(IdCentroPoblado).val());
			});

			$("#IdCentroPoblado").change(function () {
				//alert('Cambiaste el combo = ' + $("#IdCentroPoblado").val());
				LoadCaserio($(IdCentroPoblado).val());
			});

		});

		/**************este es para los centros poblados*********/
		function LoadCentroPoblado(id) {
			var dd = document.getElementById("IdCentroPoblado");
			dd.options.length = 0;
			dd.options[0] = new Option("Espere...");
			dd.selectedIndex = 0;
			dd.disabled = true;

			// Control de errores

			$("#IdCentroPoblado").ajaxError(function (event, request, settings) {
				dd.options[0] = new Option("Selecciona un CP");
			});

			// Obtenemos los datos...

			$.getJSON(
					'@Url.Action("../Sector/getServiceHijosByIdUbigeoRJSON")', // URL a la acción
					{IdUbigeoR: id },                  // Objeto JSON con parámetros
					function (data) {                    // Función de retorno exitoso
						$.each(data, function (i, item) {
							dd.options[i] = new Option(item.label, item.value);
						});
						dd.disabled = false;
					});
		}

		// ******************* esto es para los caserios ********************

		function LoadCaserio(id) {
			var dd = document.getElementById("IdCacerio");
			dd.options.length = 0;
			dd.options[0] = new Option("Espere...");
			dd.selectedIndex = 0;
			dd.disabled = true;

			// Control de errores

			$("#IdCacerio").ajaxError(function (event, request, settings) {
				dd.options[0] = new Option("Selecciona un caserio");
			});

			// Obtenemos los datos...

			$.getJSON(
					'@Url.Action("../Sector/getServiceHijosByIdUbigeoRJSON")', // URL a la acción
					{IdUbigeoR: id },                  // Objeto JSON con parámetros
					function (data) {                    // Función de retorno exitoso
						$.each(data, function (i, item) {
							dd.options[i] = new Option(item.label, item.value);
						});
						dd.disabled = false;
					});
		}
		


		
	</script>
	<!-- ################################################################# -->



	 <script type="text/javascript">


	     $(function () {


	         //************************************************************

	         function seleccionNivel() {
	             var f = document.getElementsByName("Nivel");
	             var seleccionado = false;


	             for (var i = 0; i < f.length; i++) {
	                 if (f[i].checked) {
	                     seleccionado = true;
	                     //alert('Haz seleccionado ' + f[i].value);
	                     return f[i].value;
	                     break;
	                 }
	             }
	         }

			 $("#btnGuardar").click(function () {

			     var nivel = seleccionNivel();
			     var sector;
			     alert('Nivel es ' + nivel);
			     if (nivel == "Centro Poblado") {
			         sector = document.getElementById("IdCentroPoblado").value;
			         alert('El ubigeo es ' + sector);
			     }

			     if (nivel == "Caserio") {
			         sector = document.getElementById("IdCacerio").value;
			         alert('El ubigeo es ' + sector);
			     }
				 
				 $('#sector_IdUbigeo').val(sector);

				 alert($('#sector_IdUbigeo').val());
				 
				 var data = $('form').serialize();

				 $.post('@Url.Action("Create", "Sector")',
						 data,
                
						 function (ok) {
							 if (ok) {
								 if (ok.exito == true) {
									 alert(ok.msg);
									 window.location = '@Url.Action("ListarSectores", "Sector")';
								 }
								 else {
									 alert(ok.msg);
								 }
							 }
						 }, "json");
			 });


			 $("#btnAgregar").click(function (e) {
				 e.preventDefault();

				 var row = $("#tblRuta >tbody >tr").length;

				 if (row == 0) {
					 var filaTable = '<tr>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Id\" value="0" />' + '<input type=\"hidden\" name=\"Ruta[' + row + '].Desde\" value=" + $("#ruta_Desde").val() +" />' + $("#ruta_Desde").val() + '</td>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Hasta\" value=" + $("#ruta_Hasta").val() +" />' + $("#ruta_Hasta").val() + '</td>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].IdTipoVia\" value=" + $("#IdTipoVia").val() +" />' + $("#IdTipoVia option:selected").text() + '</td>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].IdMedioTransp\" value=" + $("#IdMedioTransp").val() +" />' + $("#IdMedioTransp option:selected").text() + '</td>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Distancia\" value=" + $("#ruta_Distancia").val() +" />' + $("#ruta_Distancia").val() + '</td>';
					 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Tiempo\" value=" + $("#ruta_Tiempo").val() +" />' + $("#ruta_Tiempo").val() + '</td>';
					 filaTable += '<td><a href=\"#\" class =\"deleteruta\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Quitar Ruta\" /></a></td>';
					 filaTable += '<td><a href=\"#\" class =\"editruta\"><img src=\"/Content/Imagenes/edit.png\" alt=\"Editar Ruta\" /></a></td>';
					 filaTable = filaTable + '</tr>';

					 $("#tblRuta tbody").append(filaTable).fadeIn("slow");

					 $("#popup").dialog("close");
					 alert('La Ruta ha sido agregada correctamente')
				 }
				 else {
					 var sinErrores = true;

					 if (sinErrores) {
						 var filaTable = '<tr>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Id\" value="0" />' + '<input type=\"hidden\" name=\"Ruta[' + row + '].Desde\" value=" + $("#ruta_Desde").val() +" />' + $("#ruta_Desde").val() + '</td>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Hasta\" value=" + $("#ruta_Hasta").val() +" />' + $("#ruta_Hasta").val() + '</td>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].IdTipoVia\" value=" + $("#IdTipoVia").val() +" />' + $("#IdTipoVia option:selected").text() + '</td>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].IdMedioTransp\" value=" + $("#IdMedioTransp").val() +" />' + $("#IdMedioTransp option:selected").text() + '</td>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Distancia\" value=" + $("#ruta_Distancia").val() +" />' + $("#ruta_Distancia").val() + '</td>';
						 filaTable += '<td> <input type=\"hidden\" name=\"Ruta[' + row + '].Tiempo\" value=" + $("#ruta_Tiempo").val() +" />' + $("#ruta_Tiempo").val() + '</td>';
						 filaTable += '<td><a href=\"#\" class =\"deleteruta\"><img src=\"/Content/Imagenes/delete.png\" alt=\"Quitar Ruta\" /></a></td>';
						 filaTable += '<td><a href=\"#\" class =\"editruta\"><img src=\"/Content/Imagenes/edit.png\" alt=\"Editar Ruta\" /></a></td>';
						 filaTable = filaTable + '</tr>';

						 $("#tblRuta tbody").append(filaTable).fadeIn("slow");
					 }
					 $("#popup").dialog("close");
					 alert('La Ruta ha sido agregada correctamente')

				 }
		        document.getElementById("ruta_Id").value = ""

			 });


			 $(".deleteruta").live("click", function (e) {
				 e.preventDefault();

				 var tr = $(this).parents("tr");

				 $(tr).fadeOut("slow", function () {
					 $(tr).remove();

					 $("#tblRuta  tbody tr").each(function (index, element) {
						 var fila = $(element);
						 $(fila).find('input[name$="IdRuta"]').attr("name", "Ruta[" + index + "].IdRuta");
					 });
				 });
			 });
		 });
	</script>



<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>


<fieldset>
<legend><h4><b>Registrar Nuevo Sector</b></h4></legend>



@using (Html.BeginForm())
{
	@Html.ValidationSummary(true)
	   

	
	<div id='left'  style='float:left;width:46%;margin-top:0.5em;margin-left:0.5em;'>
		<div class="ui-widget-header ui-corner-top" style="padding:0.3em;">
			Sector
		</div>
		<br />
		<fieldset>

		<legend>INFORMACION SECTOR</legend>
	   
		<table>

		<tr>
			<td>
				   <p>@Html.Label("Provincia")</p>
				   <p>@Html.Label("Distrito")</p>
				   <p>@Html.Label("CentroPoblado")</p>
				  <p>@Html.Label("Caserio")</p>
			 </td>
			
			<td>
				   <p>@Html.TextBox("txtProv", "Cajamarca")</p>
				   <p>@Html.DropDownList("IdDistrito")</p>
				   <p>@Html.DropDownList("IdCentroPoblado")</p>
				   <p>@Html.DropDownList("IdCacerio")</p>
			</td>

		   
		</tr>

			  
		</table>
	  <br />
      <fieldset>
	    <b>Seleccionar Nivel</b> <br />
		 
		    <label>@Html.RadioButton("Nivel","Centro Poblado", true) Centro Poblado</label> 
	       <br /><label>@Html.RadioButton("Nivel","Caserio", false) Caserio</label> 
	       <br />

	</fieldset>
	

		<fieldset>
		<legend>información General</legend>
		
		@*<input type="hidden" id = "IdSector" value="0" />
		<input type="hidden" id = "IdUbigeo"/>*@

        @Html.HiddenFor(model => model.sector.Id)
        @Html.HiddenFor(model => model.sector.IdUbigeo)

		<div class="editor-label">
			@Html.Label("Categoría")
		</div>
		<div class="editor-field">
			@Html.DropDownList("IdCategoria")
			@Html.ValidationMessageFor(model => model.sector.IdCategoria)
		</div>

	   <div class="editor-label">
			@Html.Label("Nro de Familias")
		</div>
		<div class="editor-field">
			@Html.EditorFor(model => model.sector.NroFamilias)
			@Html.ValidationMessageFor(model => model.sector.NroFamilias)
		</div>

		<div class="editor-label">
			@Html.Label("¿Establecimiento de Salud?")
		</div>
		<div class="editor-field">
			<label>@Html.RadioButtonFor(model => model.sector.EstaSalud, true) Si</label>
			<label>@Html.RadioButtonFor(model => model.sector.EstaSalud, false) No</label>  
			
			@Html.ValidationMessageFor(model => model.sector.EstaSalud)
		</div>

		<div class="editor-label">
			@Html.Label("¿Energía Electrica?")
		</div>
		<div class="editor-field">
			<label>@Html.RadioButtonFor(model => model.sector.EnergElect, true) Si</label>
			<label>@Html.RadioButtonFor(model => model.sector.EnergElect, false) No</label>  
			
			@Html.ValidationMessageFor(model => model.sector.EnergElect)
		</div>

		<div class="editor-label">
			@Html.Label("Nro Fam con acceso a Agua Potable")
		</div>
		<div class="editor-field">
			@Html.EditorFor(model => model.sector.NroFamAcceso)
			@Html.ValidationMessageFor(model => model.sector.NroFamAcceso)
		</div>
		</fieldset>
		
		<br />

		<fieldset>
		<legend>Ubicación</legend>

        
		
        <div class="editor-label">
			@Html.Label("Altura")
		</div>
		<div class="editor-field">
		   
			@Html.EditorFor(model => model.sector.Ubicacion.Altura)
			@Html.ValidationMessageFor(model => model.sector.Ubicacion.Altura)
		</div>

		<div class="editor-label">
			@Html.Label("Latitud (Coor X)")
		</div>
		<div class="editor-field">
			@Html.EditorFor(model => model.sector.Ubicacion.CoorX)
			@Html.ValidationMessageFor(model => model.sector.Ubicacion.CoorX)
		</div>

		 <div class="editor-label">
			@Html.Label("Longitud (Coor Y)")
		</div>
		<div class="editor-field">
			@Html.EditorFor(model => model.sector.Ubicacion.CoorY)
			@Html.ValidationMessageFor(model => model.sector.Ubicacion.CoorY)
		</div>

		</fieldset>
	   
		</fieldset>
		
		</div>
   
		<div id='rigth'  style='float:left;width:52%;margin-top:0.5em;margin-left:0.5em;'>
		<div class="ui-widget-header ui-corner-top" style="padding:0.3em;">
			Rutas
		</div>
		<br />
		<fieldset>
		<legend>RUTAS DESDE LA CAPITAL DEL DISTRITO</legend>
	   
		<br />
		 <fieldset>
		<legend>Listado de Rutas</legend>

	   @*  ****************** TABLA RUTA ************************* *@
		
				<table id="tblRuta">
			<tr>
				
				<th>
					Desde
				</th>
				<th>
					Hasta
				</th>
				<th>
					TipoVia
				</th>
				<th>
					MedioTransp
				</th>
				<th>
					Distancia
				</th>
				<th>
					Tiempo
				</th>          
			</tr>

		</table>


		@* *************** FIN DE TABLA DE LISTADO DE RUTAS ************  *@

		<br /><br /><br /><br /><br /><br /><br /><br />

		</fieldset>
		<br />
		<button id="btnNuevo">Crear Ruta</button> 

		</fieldset>

		</div>
		<br />
 
	
}

<br />
	   
			<p style='clear:both;margin-top:10em;padding:1em;'>
			<button id="btnGuardar" type="button">Crear Sector</button> 
			
		</p>
	 
</fieldset>

<div>
<a href="@Url.Action("Index", "Sector")">
			   <img src="@Url.Content("~/Content/Imagenes/volver.jpg")" title="Volver al Menu" alt="Volver al Menu" />
			</a>
	
</div>

<div id="popup">
	@Html.Partial("~/Views/Ruta/_Create.cshtml")
</div>

